<template>
	<el-col :span="24" class="All">
		<!-- <el-col :span="2" class="spanInfo"> -->
			<!-- <div class="searchIP">
				<el-input
					v-model="searchIP"
					placeholder="搜索IP"
					clearable
				></el-input>
			</div>
			<div class="textLable">
				<template v-for="item in columnsFn">
					<el-button
						class="IpButton"
						:class="{ selected: item.selected }"
						type="primary"
						@click="handSearchIp(item)"
						plain
						:key="item.cid"
					>
						{{ item.ip }}
					</el-button>
				</template>
			</div> -->
		<!-- </el-col> -->
		<el-col :span="24" class="TableInfo">
			<div class="container">
				
				<el-col :span="4">
					<el-col :span="8" style="display:grid;align-items:center;font-size:14px;height:30px" >请选择IP:</el-col>
					
					<el-col :span="15">
						<el-select
					v-model="selectItem"
					filterable
					remote
					reserve-keyword
					placeholder="请输入ip"
					:remote-method="remoteMethod"
					:loading="loadings"
					@change="selectIp" 
				>
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
					</el-col>
				</el-col>
				<el-col :span="20">
					<v-historyToolBar
					:fullPath="postData.opera"
					:tableColumns="tableColumns"
					@changeLie="getChangeLie"
					@pickerDate="getPickerDate"
					@selectOpera="getSelectOpera"
					@inputFilter="getInputFilter"
					:operaOption="operaOption"
					:tableData="tableData"
					:tableDataFields="tableDataFieldsFn"
					@exportData="exportData"
					:isShowfre="false"
				>
				</v-historyToolBar>
				</el-col>
				
				
				<el-table
					v-loading="loading"
					element-loading-text="拼命加载中"
					element-loading-spinner="el-icon-loading"
					:data="tableData"
					border
					stripe
					style="width: 100%"
				>
					<template v-for="item in tableColumns">
						<el-table-column
							:prop="item.prop"
							:label="item.label"
							:width="item.width"
							v-if="item.isShow"
							:key="item.prop"
						>
							<template v-slot="scope">
								<template v-if="item.format == 'progress'">
									<el-progress
										:percentage="scope.row[item.prop]==null?0:Number(calcCheng(scope.row[item.prop],100).toFixed(1))"
										:color="TalallColorMethod"
									>
									</el-progress>
								</template>
								<template v-else-if="item.format == 'capacity'">
									<div>
										{{ scope.row[item.prop] }}&nbsp;GB
									</div>
								</template>
								<template v-else>
									<div>
										{{ scope.row[item.prop] }}
									</div>
								</template>
							</template>
						</el-table-column>
					</template>
				</el-table>
				<v-pagination
					:dataTotal="dataTotal"
					:curPage="postData.curPage"
					:pageSize="postData.pageSize"
					@getCurPage="getPaginationCurPage"
					@getPageSize="getPaginationPageSize"
				>
				</v-pagination>
			</div>
		</el-col>
	</el-col>
</template>

<script>
import { fetchData, exportData, Testseledb, tableSall } from '@/api/index.js';
import vPagination from 'common/Pagination.vue';
import vHistoryToolBar from 'historyData/HistoryToolBar.vue';
import DbTableSpaceTableColumns from 'historyData/dataBase/dbOracle/DbTableSpaceTableColumns.js';
import DbAsmGroupTableColumns from 'historyData/dataBase/dbOracle/DbAsmGroupTableColumns.js';
import DBTotalTableColumns from 'historyData/dataBase/dbOracle/DbTotal.js';
import downloadFile from '@/plugs/downloadFile.js';
import dateFormat from '@/plugs/dateFormat.js';

export default {
	components: {
		vPagination,
		vHistoryToolBar,
	},
	data() {
		return {
			postData: {
				opera: '',
				curPage: 1,
				pageSize: 20,
				filtersType: 'fuzzyquery',
				filters: {
					monid: '',
					StartTime: '',
					EndTime: '',
					ip: '',
					// "Tablespace_Name": ""
				},
			},
			infoItem: '',
			selectIteminfo: '',
			tableData: [],
			dataTotal: 0,
			tableColumns: [],
			searchJson: {},
			operaOption: [
				{
					label: '表空间',
					value: 'DBTablespaceHistory',
					filter: { TABLESPACE_NAME: '指定表空间名...' },
				},
				{ label: 'ASM', value: 'DBAsmGroupHistory', filter: '' },
				{ label: '总数据量', value: 'DBTotal', filter: '' },
			],
			operaColumns: {
				DBTablespaceHistory: DbTableSpaceTableColumns,
				DBAsmGroupHistory: DbAsmGroupTableColumns,
				DBTotal: DBTotalTableColumns,
			},
			postSearchData: {
				opera: 'dbConnect',
				curPage: 1,
				pageSize: 20,
				sort: {
					sortColumn: '',
					sortOrders: '',
				},
				filtersType: 'fuzzyquery',
				filters: {},
			},
			columns: [],
			TextDatabace: {},
			searchIP: '',
			seleItem: {},
			options: '',
			list: [],
			selectItem: '',
			loadings: false,
			loading: true,
			exportOption: {
				DBTablespaceHistory: {
					url: 'Sp/excMV_db_tablespace',
					fileName: '表空间',
				},
				DBAsmGroupHistory: {
					url: '',
					fileName: 'ASM',
				},
				DBTotal: {
					url: '',
					fileName: 'ASM',
				},
			},
		};
	},
	created() {
		this.getSearchData();
	},
	computed: {
		// columnsFn() {
		// 	return this.columns.filter((d) => {
		// 		if (d.ip.includes(this.searchIP)) {
		// 			d['selected'] = false;
		// 			// if (d.MONID == this.postData.filters.monid) {
		// 			// 	d['selected'] = true;
		// 			// }
		//             	if (d.cid == this.postData.filters.monid) {
		// 				d['selected'] = true;
		// 			}

		// 			return d;
		// 		}
		// 	});
		// },
		tableDataFieldsFn() {
			let _jsonfields = {};
			this.tableColumns.filter((item) => {
				if (item.isShow) {
					_jsonfields[item.label] = item.prop;
				}
			});

			return _jsonfields;
		},
	},
	methods: {
		getSearchData() {
			Testseledb().then((res) => {
				console.log(res, '236');
				this.columns = res.data;
				this.list = this.columns.map((item) => {
					return {
						value: `${item.cid}`,
						label: `${item.ip}`,
					};
				});

				if (this.columns.length > 0) {
					this.dbClickFirst();
				}
			});

			// fetchData({
			// 	postSearchData: JSON.stringify(this.postSearchData),
			// }).then((res) => {
			// 	console.log(res,'254')
			// 	this.columns = res.data;
			// 	if (this.columns.length > 0) {
			// 		this.dbClickFirst();
			// 	}
			// });
		},

		TalallColorMethod(percentage) {
			if (percentage <= 50) {
				return '#67c23a';
			} else if (percentage <= 75) {
				return '#e6a23c';
			} else {
				return '#f56c6c';
			}
		},

		// handSearchIp(item) {
		// 	this.selectItem = item;

		// 	this.postData.filters.monid = item.cid;

		// 	this.getTableData();
		// },
		dbClickFirst() {
			// this.handSearchIp(this.columns[0]);
			this.selectItem = this.columns[0].ip;
			// this.selectItem = {
			// 			value: `${this.columns[0].cid}`,
			// 			label: `${this.columns[0].ip}`,
			// 		};
				
			// console.log(this.selectItem)
			this.selectIteminfo = this.columns[0];
			// console.log(this.selectIteminfo, '282');
			this.getTableData();
			this.initDbTotalData();
		},
		getTableData() {
			this.loading = true;

			fetchData({
				postData: JSON.stringify(this.postData),
			}).then((res) => {
				this.tableColumns = this.operaColumns[this.postData.opera];
				this.dataTotal = res.dataTotal;
				this.tableData = res.data;

				this.loading = false;
			});
		},
		initDbTotalData() {
			// console.log(this.selectIteminfo, 'sele');
			// {ip:'172.20.1.98',time:'2018-10-10 00:00:00',time2:'2021-04-15 00:00:00'}
			// {ip:this.selectItem.ip,time:this.postData.filters.StartTime,time2:this.postData.filters.EndTime }
			if (Array.isArray(this.selectIteminfo)) {
				this.selectIteminfo = this.selectIteminfo[0];
			}
			if (
				this.selectIteminfo.length != 0 &&
				this.postData.filters.StartTime &&
				this.postData.filters.EndTime
			) {
				tableSall({
					ip: this.selectIteminfo.ip,
					time: this.postData.filters.StartTime,
					time2: this.postData.filters.EndTime,
				})
					.then((res) => {
						// console.log(res, '总数据量');
						if (res) {
							this.tableData = [res];
						}
					})
					.catch((err) => {
						console.log(err);
					});
			}
		},

		getPaginationCurPage(val) {
			this.postData.curPage = val;

			this.getTableData();
			this.initDbTotalData();
		},
		getPaginationPageSize(val) {
			// 分页大小改变之后，重置当前页码为 1
			this.postData.curPage = 1;
			this.postData.pageSize = val;

			this.getTableData();
			this.initDbTotalData();
		},
		getChangeLie(val) {
			// 遍历表格列
			this.tableColumns.map((item, index) => {
				// 列的显示隐藏状态改变
				item.isShow = val.includes(item.label);
			});
		},
		// 获取子组件选择的时间
		getPickerDate(pickerDate) {
			this.postData.curPage = 1;
			for (const key in pickerDate) {
				this.postData.filters[key] = pickerDate[key];
			}

			this.getTableData();
			this.initDbTotalData();
		},
		getSelectOpera(item) {
			this.postData.curPage = 1;
			this.postData.opera = item.value;
			// 删除后台可能无法识别的 filters 条件
			for (const key in this.postData.filters) {
				if (key != 'monid' && key != 'StartTime' && key != 'EndTime') {
					delete this.postData.filters[key];
				}
			}

			this.getTableData();
			this.initDbTotalData();
		},
		getInputFilter(data) {
			this.postData.curPage = 1;
			for (const key in data) {
				if (data.hasOwnProperty(key)) {
					const element = data[key];
					this.postData.filters[key] = element;
				}
			}

			this.getTableData();
			this.initDbTotalData();
		},
		exportData(data) {
			console.log(this.selectIteminfo)
			if (Array.isArray(this.selectIteminfo)) {
				this.selectIteminfo = this.selectIteminfo[0];
			}
			let _url = this.exportOption[data.type].url;
			let _fileName =
				'【' +
				this.selectIteminfo.ip +
				'】' +
				this.exportOption[data.type].fileName +
				'.xls';
			let _data = {
				ip: this.selectIteminfo.ip,
				time: this.postData.filters.StartTime,
				time2: this.postData.filters.EndTime,
			};
			
			exportData(_url, _data)
				.then((res) => {
					// const _blob = new Blob([res], { type: res.type });
					// const _downElement = document.createElement('a');
					// const _href = URL.createObjectURL(_blob);
					// _downElement.href = _href;  // 下载的链接

					// const _timeStamp = new Date().toString();
					// const _nameStr = _timeStamp;
					// _downElement.download = _nameStr;   // 文件名

					// _downElement.click();   // 点击下载
					// URL.revokeObjectURL(_href);    // 释放 blob 对象

					downloadFile(res, _fileName);
				})
				.catch((err) => {
					this.$message.error({
						message: '导出文件失败：' + _fileName,
					});
				});
		},
		remoteMethod(query) {
			if (query !== '') {
				this.loading = true;
				setTimeout(() => {
					this.loading = false;

					this.options = this.list.filter((item) => {
						return (
							item.label
								.toLowerCase()
								.indexOf(query.toLowerCase()) > -1
						);
					});
					console.log(this.options)
				}, 200);
				// console.log(this.selectItem, '158');
				this.postData.filters.monid = this.selectItem;
				// this.selectIteminfo = this.columns.filter(
				// 	(item, index, array) => item.cid == this.selectItem
				// );
				this.getTableData();
				// this.initDbTotalData();
			} else {
				this.options = [];
			}
		},
		selectIp() {
			// console.log(this.selectItem, '5555');
			this.postData.filters.monid = this.selectItem;
			// console.log(this.columns);
			this.selectIteminfo = this.columns.filter(
				(item, index, array) => item.cid == this.selectItem
			);
			// console.log(this.selectIteminfo);
			this.getTableData();
			this.initDbTotalData();
		},
	},
	watch: {},
};
</script>

<style scoped>
.el-table .warning-row {
	background: oldlace;
}
.el-table .success-row {
	background: #f0f9eb;
}
.spanInfo {
	padding-right: 10px !important;
}
.searchIP {
	padding-bottom: 10px;
}
.textLable >>> .el-button + .el-button {
	margin-left: 0px !important;
}
.IpButton {
	width: 100%;
	font-size: 14px;
}
.textLable .IpButton.selected {
	color: #fff;
	background-color: rgba(64, 158, 255);
}
</style>
